﻿<template>
    <full-screen-dialog
        :title="titleMap[mode]"
        v-model="visible"
        :width="900"
        destroy-on-close
        :close-on-click-modal="false"
        @closed="$emit('closed')"
    >
        <el-form
            :model="entityObj"
            :rules="rules"
            ref="dialogForm"
            label-width="100px"
            :disabled="mode == 'Show'"
        >
            <el-row>
                <el-col :span="24">
                    <el-form-item label-width="120px" label="公告类型" prop="bulletinType">
                        <el-select
                            placeholder="---请选择公告类型---"
                            v-model="entityObj.bulletinType"
                            style="width: 300px"
                        >
                            <el-option
                                v-for="item in optionsBulletinType"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label-width="120px" label="面向机构：" prop="orgType">
                        <el-radio-group v-model="entityObj.orgType" v-if="orgType==1" @change="orgChange">
                            <el-radio :label="1">本集采中心</el-radio>
                            <el-radio :label="2">门店</el-radio>
                            <el-radio :label="3">供应商</el-radio>
                        </el-radio-group>
                        <el-radio-group v-model="entityObj.orgType" v-else-if="orgType==2" @change="orgChange">
                            <el-radio :label="1" >集采中心</el-radio>
                            <el-radio :label="2" >本门店</el-radio>
                        </el-radio-group>
                        <el-radio-group v-model="entityObj.orgType" v-else-if="orgType==3" @change="orgChange">
                            <el-radio :label="1" >集采中心</el-radio>
                            <el-radio :label="3" >本供应商</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="entityObj.orgType==1 && this.orgType!=1 ">
                <el-col :span="24">
                    <el-form-item label-width="120px" label="集采中心选择：">
                        <sc-purchase-unity-select 
                            ref="purchaseUnitySelect" 
                            :props="purchaseUnityProps" 
                            :selectKeyValue="'purchaseUnityId'"
							v-model="entityObj.purchaseUnitys" 
                            :multiple="true" 
                            @fatherMethod="purchaseUnitySelectProcess"
                            :collapseTags=false
							style="width: 100%;">
                        </sc-purchase-unity-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-else-if="entityObj.orgType==2 && this.orgType!=2">
                <el-col :span="24">
                    <el-form-item label-width="120px" label="门店选择：">
                        <sc-store-select 
                            ref="storeSelect" 
                            :props="storeProps" 
                            :selectKeyValue="'storeId'"
							v-model="entityObj.stores" 
                            :multiple="true" 
                            @fatherMethod="storeSelectProcess"
                            :collapseTags=false
							style="width: 100%;">
                        </sc-store-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-else-if="entityObj.orgType==3 && this.orgType!=3">
                <el-col :span="24">
                    <el-form-item label-width="120px" label="供应商选择：">
                        <sc-supplier-select
                            ref="supplierSelect"
                            :props="supplierProps"
                            :selectKeyValue="'supplierId'"
                            :multiple="true"
                            v-model="entityObj.suppliers"
                            @fatherMethod="supplierSelectProcess"
                            :collapseTags=false
                            style="width: 100%;">
                        </sc-supplier-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label-width="120px" label="公告标题：" prop="bulletinTitle">
                        <el-input v-model="entityObj.bulletinTitle" type="text" style="width: 100%"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label-width="120px" label="公告内容：" prop="bulletinBody">
                        <el-input v-model="entityObj.bulletinBody" type="textarea" :rows="6" style="width: 100%"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="16">
                    <el-form-item label-width="120px" label="公告时间：" prop="dates">
                        <el-date-picker
                            style="width: 300px"
                            v-model="entityObj.dates"
                            type="datetimerange"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            format="YYYY-MM-DD HH:mm:ss"
                            range-separator="-"
                            unlink-panels="true"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            @change="changeProtocolDate"
                            :default-time="defaultTime"
                        />
                       
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label-width="120px" label="间隔周期：" >
                        <el-radio-group v-model="entityObj.intervalType">
                            <el-radio :label="1" >每日</el-radio>
                            <el-radio :label="2" >每周</el-radio>
                            <el-radio :label="3" >每月</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label-width="120px"  >
                        <!-- 每周 -->
                        <el-card style="width: 100%;padding: 10px;cursor: pointer;" shadow="never" v-if="entityObj.intervalType==2">
                            
                            <el-tag type="primary" @click="onWeekChange(1)" :effect="this.entityObj.intervalValue==1?'dark':'plain'">周一</el-tag>
                            <el-tag type="primary" @click="onWeekChange(2)" :effect="this.entityObj.intervalValue==2?'dark':'plain'">周二</el-tag>
                            <el-tag type="primary" @click="onWeekChange(3)" :effect="this.entityObj.intervalValue==3?'dark':'plain'">周三</el-tag>
                            <el-tag type="primary" @click="onWeekChange(4)" :effect="this.entityObj.intervalValue==4?'dark':'plain'">周四</el-tag>
                            <el-tag type="primary" @click="onWeekChange(5)" :effect="this.entityObj.intervalValue==5?'dark':'plain'">周五</el-tag>
                            <el-tag type="primary" @click="onWeekChange(6)" :effect="this.entityObj.intervalValue==6?'dark':'plain'">周六</el-tag>
                            <el-tag type="primary" @click="onWeekChange(7)" :effect="this.entityObj.intervalValue==7?'dark':'plain'">周日</el-tag>

                        </el-card>
                        <!-- 每月 -->
                        <el-card style="width: 100%;padding: 10px;cursor: pointer;" shadow="never" v-if="entityObj.intervalType==3">
                            <el-tag type="primary" v-for="day,index in 31" :key="day" @click="onMonthChange(day)" :effect="this.entityObj.intervalValue==day?'dark':'plain'">
                                {{ index+1 }}号
                            </el-tag>
                        </el-card>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label-width="120px" label="公告终端：" prop="terminals">
                        <el-checkbox-group v-model="entityObj.terminals">
                            <el-checkbox :key="1" :label="1" >PC端</el-checkbox>
                            <el-checkbox :key="2" :label="2" >小程序端</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label-width="120px" label="发送类型：">
                       

                        <el-radio-group v-model="entityObj.bulletInSendType" v-if="this.orgType==1" @change="sendTypeChange">
                            <el-radio :label="0">所有人</el-radio>
                            <el-radio :label="1" :disabled="this.entityObj.orgIds<=0">指定用户</el-radio>
                        </el-radio-group>
                         <el-radio-group v-model="entityObj.bulletInSendType" v-else-if="this.orgType==2" @change="sendTypeChange">
                            <el-radio :label="0">所有人</el-radio>
                            <el-radio :label="1" :disabled="this.entityObj.orgType==1">指定用户</el-radio>
                        </el-radio-group>
                        <el-radio-group v-model="entityObj.bulletInSendType" v-else-if="this.orgType==3" @change="sendTypeChange">
                            <el-radio :label="0">所有人</el-radio>
                            <el-radio :label="1" :disabled="this.entityObj.orgType==1">指定用户</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="entityObj.bulletInSendType==1">
                <el-col :span="24">
                    <el-form-item label-width="120px" label="人员列表：">
                        <el-button type="primary" plain size="small" @click="opUserChoice()" >选择人员</el-button><br>
                        <el-table :data="entityObj.userItems" style="width: 100%">
                            <el-table-column prop="accountId" label="用户ID" width="100" />
                            <el-table-column prop="realName" label="用户名称" width="120" />
                            <el-table-column prop="mobile" label="手机号" width="150" />
                            <el-table-column prop="accountTypeDesc" label="机构类型" width="100"/>
                            <el-table-column prop="orgName" label="机构名称" />
                            <el-table-column label="操作" width="100">
                                <template #default="scope">
                                    <el-button
                                        type="danger"
                                        size="small"
                                        @click="deleteRow(scope.row)"
                                    >移除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label-width="120px" label="公告状态：">
                        <el-switch v-model="entityObj.status" :active-value="1" :inactive-value="0"/>
                    </el-form-item>
                   
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label-width="120px" label="发布人员：">
                       {{ entityObj.createName }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label-width="120px" label="发布时间：">
                       {{ entityObj.createTime}}
                    </el-form-item>
                </el-col>
            </el-row>
           
        </el-form>
        <template #footer>
            <el-button @click="visible = false">取 消</el-button>
            <el-button
                v-if="mode != 'Show'"
                type="primary"
                :loading="isSaveing"
                @click="submit()"
            >确 定</el-button>
        </template>
        <template>
            <el-dialog
                v-model="userVisible"
                title="选择人员"
                :width="1000"
                :center="true"
                append-to-body
                style="height: 480px"
            >
                <el-row>
                    <sc-account-choice
                        ref="scAccountChoice"
                        :defaultQueryList="accountQueryList"
                    ></sc-account-choice>
                </el-row>
                <template #footer>
                    <el-button @click="userVisible = false">取 消</el-button>
                    <el-button type="primary"  @click="setUserChoice">确定</el-button>
                </template>
            </el-dialog>
        </template>
    </full-screen-dialog>
</template>

<script>
import tool from "@/utils/tool";
export default {
    emits: ["success", "closed"],
    data() {
        
        return {
            mode: "Add",
            titleMap: {
                Add: "新增公告",
                Edit: "编辑公告",
                Show: "查看公告",
            },
            entityObj: {
                bulletInSendType:0,
                status:1,
                orgIds:[],
                purchaseUnitys:[],
                stores:[],
                suppliers:[],
                userItems:[],
                intervalType:0,  //间隔周期
                intervalValue:0 //间隔周期值
            },
            visible: false,
            isSaveing: false,
            needSaveFlag: false,
            //验证规则
            rules: {
                orgType:[
                    { required: true,  message: "请选择面向机构" ,trigger: 'change'},
                ],
                bulletinTitle: [
                    { required: true, type: "string", message: "请填写公告标题" },
                ],
                bulletinBody: [
                    { required: true, type: "string", message: "请填写公告内容" },
                ],
                dates: [
                    { required: true, type: "array", message: "请填写公告时间" },
                ],
               
                terminals: [
                    { required: true, type: "array", message: "请选择公告终端" },
                    
                ],
            },
            purchaseUnityProps:{
                label: "purchaseUnityName",
                value: "purchaseUnityId",
            },
            storeProps: {
					label: "storeName",
					value: "storeId",
			},
            supplierProps: {
                label: "supplierName",
                value: "supplierId",
            },
            orgId:0,
            orgType:0,
            //用户选择框
            userVisible:false,
            defaultQueryList:{},
            optionsStatus:[],
            optionsBulletinType:[],
            defaultTime:[
                new Date(2000, 1, 1, 0, 0, 0),
                new Date(2000, 2, 1, 23, 59, 59),
            ],
           
        };
    },
   
    watch: {
            
	},
    methods: {
        //显示=
        open(mode = "Add") {
            this.mode = mode;
            this.visible = true;
            
            return this;
        },
       
        //选择人员
        opUserChoice(){
            this.userVisible = true;
            this.accountQueryList={  orgIds:this.entityObj.orgIds }
            this.$nextTick(() => {
                this.$refs.scAccountChoice.opBindData();
            });
        },
        //从人员中选择后
        setUserChoice() {
            console.log("人员选择",this.$refs.scAccountChoice.selectionRows);
            this.userVisible = false;
            this.entityObj.userItems=this.$refs.scAccountChoice.selectionRows
        },
        deleteRow(row) {
            this.entityObj.userItems.splice(row, 1);
        },
        //表单注入数据
        async setData(data) {
            console.log(" data",data);
           
            var arr=[];
            if(data.endPoint==3)
            {
                arr.push(1);
                arr.push(2);
            }else
            {
                arr.push(data.endPoint)
            }
            data.terminals=arr

            this.entityObj=data
            
        },
        //表单提交方法
        submit() {
            this.$refs.dialogForm.validate(async (valid) => {
                if (valid) {
                    this.isSaveing = true;
                    const data={ ...this.entityObj}
                    console.log("提交",data);
                    if(data.orgIds.length<=0)
                    {
                        this.$message.error("请选择对应的机构");
                        this.isSaveing = false;
                        return;
                    }
                   
                    data.endPoint=data.terminals.reduce(function(prev, curr, idx, arr){return prev + curr;});
                    data.userIds=data.bulletInSendType==1? data.userItems.map(item=>item.accountId):[];   
                    console.log("提交",data);
                    try {
                        var returnValue =
                            await this.$API.auth.PostProcessApi.post(
                                this.mode == "Add"? "bulletin/create": "bulletin/update",data
                            );
                        if (returnValue.status == 200) {
                            this.$message.success("操作成功");
                            this.$emit("fatherMethod");
                            this.isSaveing = false;
                            this.visible = false;
                        } else {
                            this.$message.error("操作失败:" + returnValue.msg);
                            this.isSaveing = false;
                        }
                    } catch (error) {
                        this.loading = false;
                        this.isSaveing = false;
                        return false;
                    }
                }
            });
        },
        async initOptions() {
           
        },
        purchaseUnitySelectProcess(rows){
            if(rows.length>0)
            {
                this.entityObj.orgIds=rows.map(p=>p.purchaseUnityId)            
            }
        },
        storeSelectProcess(rows){
            if(rows.length>0)
            {
                this.entityObj.orgIds=rows.map(p=>p.storeId)            
            }
        },
        supplierSelectProcess(rows){
            if(rows.length>0)
            {
                this.entityObj.orgIds=rows.map(p=>p.supplierId)            
            }
        },
        //面向机构选中事件
        orgChange(radioValue)
        {
            this.entityObj.orgIds=[];
            
            //发送类型重置为 所有人
            this.entityObj.bulletInSendType=0
            this.entityObj.userItems=[];

            //酒业用户
            if( this.orgType==1)
            {
                //本酒业
                if(radioValue==1)
                {
                    this.entityObj.orgIds=[this.orgId];
                }
                
            }
            //门店用户
            else if( this.orgType==2)
            {
                //选择酒业
                if(radioValue==1)
                {
                    this.entityObj.orgIds=this.entityObj.purchaseUnitys?this.entityObj.purchaseUnitys.map(p=>p.purchaseUnityId):[];
                }
                //选择本门店
                else if(radioValue==2)
                {
                    this.entityObj.orgIds=[this.orgId];
                }
                
            }
            //供应商用户
            else if( this.orgType==3)
            {
                //选择酒业
                if(radioValue==1)
                {
                    this.entityObj.orgIds=this.entityObj.purchaseUnitys?this.entityObj.purchaseUnitys.map(p=>p.purchaseUnityId) : [];

                }
                //选择本供应商
                else if(radioValue==3)
                {
                    this.entityObj.orgIds=[this.orgId];
                }
              
            }
        },
        //发送类型选择事件
        sendTypeChange(radioValue)
        {
            //酒业用户
            if( this.orgType==1)
            {
                //本酒业
                if(this.entityObj.orgType==1)
                {
                    this.entityObj.orgIds=[this.orgId];

                    //所有人
                    if(radioValue==0)
                    {
                        this.entityObj.userIds=[];
                        this.entityObj.userItems=[];

                    }//指定用户
                    else
                    {
                        this.accountQueryList={  orgIds:[this.orgId] }

                    }

                }//门店
                else if(this.entityObj.orgType==2)
                {
                    //所有人
                    if(radioValue==0)
                    {
                        this.entityObj.userIds=[];
                        this.entityObj.userItems=[];

                    }//指定用户
                    else
                    {
                       
                       var sroreIds=this.entityObj.stores.map(p=>p.storeId);
                       this.accountQueryList={  orgIds:sroreIds} 
                       this.$nextTick(() => {
                            this.$refs.scAccountChoice.opBindData();
                       });
                    }


                }//供应商
                else if(this.entityObj.orgType==3)
                {
                    //所有人
                    if(radioValue==0)
                    {
                        this.entityObj.userItems=[];

                    }//指定用户
                    else
                    {
                        var supplierIds=this.entityObj.suppliers.map(p=>p.supplierId);
                        this.accountQueryList={  orgIds:supplierIds} 
                        this.$nextTick(() => {
                            this.$refs.scAccountChoice.opBindData();
                       });
                    }


                }
                
            }
            
        },
        changeProtocolDate(values)
        {
            if (values && values.length === 2) {
                const startDate = new Date(values[0]);
                const endDate = new Date(values[1]);
                if (endDate < new Date()) {
                    this.entityObj.dates[1] = tool.formatDate(new Date()); // 重置结束时间为当前时间
                }
            }         
        },
        async initOptions() {
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "base-dictionary/options",
                    { Codes: ["Status","BulletinType"] }
                );
                if (returnValue.status == 200) {
                    this.optionsStatus = returnValue.response.find(
                        (p) => p.code == "Status"
                    ).optionsDetails;
                    this.optionsBulletinType = returnValue.response.find(
                        (p) => p.code == "BulletinType"
                    ).optionsDetails;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
        //间隔类型--周
        onWeekChange(e)
        {
            this.entityObj.intervalValue=e;
            console.log("周选中",e)
        },
        onMonthChange(e)
        {
            this.entityObj.intervalValue=e;
            console.log("月选中",e)
        },
        
       
    },
    async mounted() {
        this.orgId = tool.data.get("USER_INFO").OrgId;
        this.orgType = tool.data.get("USER_INFO").AccountType;
        await this.initOptions();
        this.entityObj.createName = tool.data.get("USER_INFO").Name;
        this.entityObj.createTime = tool.formatDate(new Date()) 
        
    },
};
</script>

